<template>
    <div class="new-index">
        <myNav></myNav>
        <my-menu></my-menu>
        <div class="main">
            <img
                class="bj-img"
                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/login-bg.png"
                alt="登录小竹财税"
            />

            <div class="login-div">
                <div v-if="tabsIndex == 0 || tabsIndex == 1" class="top-tabs">
                    <div
                        class="tab"
                        :class="{ 'tab-s': loginType == 'wx' }"
                        @click="getAppletCode2"
                    >
                        扫码登录
                    </div>
                    <div
                        class="tab"
                        :class="{
                            'tab-s':
                                (tabsIndex == 0 || tabsIndex == 1) &&
                                loginType == 'web',
                        }"
                        @click="
                            tabsIndex = 0;
                            loginType = 'web';
                            clearWeChatTime();
                        "
                    >
                        {{ tabsIndex == 0 ? "验证码登录" : "账号登录" }}
                    </div>
                    <!-- <div
                        class="tab"
                        :class="{
                            'tab-s': tabsIndex == 1 && loginType == 'web',
                        }"
                        @click="
                            tabsIndex = 1;
                            loginType = 'web';
                            clearWeChatTime();
                        "
                    >
                        密码登录
                    </div> -->
                </div>
                <template v-if="loginType == 'web'">
                    <div
                        v-if="tabsIndex == 2 || tabsIndex == 3"
                        class="login-title"
                    >
                        {{ tabsIndex == 2 ? "注册小竹账户" : "找回密码" }}
                    </div>

                    <div class="form">
                        <el-form
                            :model="loginForm"
                            :rules="loginRules"
                            ref="loginForm"
                            label-width="0"
                            class="demo-ruleForm"
                        >
                            <el-form-item label="" prop="mobile">
                                <el-input
                                    v-model="loginForm.mobile"
                                    class="login-input"
                                    placeholder="请输入手机号"
                                    @input="mobileChange"
                                ></el-input>
                            </el-form-item>
                            <el-form-item
                                v-if="
                                    tabsIndex == 0 ||
                                    tabsIndex == 2 ||
                                    tabsIndex == 3
                                "
                                label=""
                                prop="code"
                            >
                                <el-input
                                    v-model="loginForm.code"
                                    class="login-input"
                                    placeholder="请输入短信验证码"
                                >
                                    <el-button slot="append" :class="{'code-test-good': isMobile && codeTest == '获取验证码'}" @click="isGetCode">
                                        {{ codeTest }}
                                    </el-button>
                                </el-input>
                            </el-form-item>
                            <el-form-item
                                v-if="tabsIndex == 1 || tabsIndex == 2"
                                label=""
                                prop="password"
                            >
                                <el-input
                                    v-model="loginForm.password"
                                    class="login-input"
                                    show-password
                                    placeholder="请输入密码"
                                ></el-input>
                            </el-form-item>

                            <el-form-item
                                v-if="tabsIndex == 3"
                                label=""
                                prop="passwordNew"
                            >
                                <el-input
                                    v-model="loginForm.passwordNew"
                                    show-password
                                    class="login-input"
                                    placeholder="设置新密码"
                                ></el-input>
                            </el-form-item>
                            <el-form-item
                                v-if="tabsIndex == 3"
                                label=""
                                prop="passwordNew2"
                            >
                                <el-input
                                    v-model="loginForm.passwordNew2"
                                    class="login-input"
                                    show-password
                                    placeholder="再次确认新密码"
                                ></el-input>
                            </el-form-item>

                            <el-form-item v-if="tabsIndex == 2" label="">
                                <el-checkbox
                                    v-model="loginForm.agree"
                                    true-label="1"
                                    false-label="0"
                                >
                                    <span class="agree">
                                        我已同意
                                        <span @click.stop="goxieyi(1)"
                                            >《小竹用户协议》</span
                                        >和<span @click.stop="goxieyi(2)"
                                            >《用户隐私政策》</span
                                        >
                                    </span>
                                </el-checkbox>
                            </el-form-item>

                            <el-form-item>
                                <el-button
                                    style="width: 100%"
                                    type="primary"
                                    :disabled="submitDisabled"
                                    @click="clickSubmit()"
                                >
                                    <template v-if="tabsIndex == 2">
                                        注册
                                    </template>
                                    <template v-else-if="tabsIndex == 3">
                                        确定更改
                                    </template>
                                    <template v-else> 登录 </template>
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </div>

                    <div
                        v-if="tabsIndex == 0"
                        class="qita"
                        style="
                            text-align: left;
                            margin-bottom: 35px;
                            color: #333333;
                        "
                    >
                        <div
                            @click="
                                tabsIndex = 1;
                                loginType = 'web';
                                clearWeChatTime();
                            "
                        >
                            账号密码登录
                        </div>
                    </div>
                    <div
                        v-if="tabsIndex == 0"
                        class="qita"
                        style="text-align: center"
                    >
                        未注册的手机号验证通过后将自动注册
                    </div>

                    <div
                        v-if="tabsIndex == 1"
                        class="qita"
                        style="display: flex; justify-content: space-between"
                    >
                        <!-- <div @click="tabsIndex = 2">免费注册</div> -->
                        <div @click="tabsIndex = 0">验证码登录</div>
                        <div style="cursor: pointer" @click="tabsIndex = 3">
                            忘记密码
                        </div>
                    </div>
                    <div v-if="tabsIndex == 2 || tabsIndex == 3" class="qita">
                        已有账号？ <span @click="tabsIndex = 0">立即登录</span>
                    </div>
                </template>
                <template v-if="loginType == 'wx'">
                    <div
                        v-loading="wechatloading"
                        element-loading-text="拼命生成二维码中"
                        class="login-wx-img"
                    >
                        <img v-if="officialCode" :src="officialCode" alt="" />
                        <div v-show="wechatCodeExpire" class="expire">
                            <div
                                style="text-align: center; padding-bottom: 6px"
                            >
                                二维码已过期
                            </div>

                            <el-button
                                class="expire-button"
                                type="primary"
                                size="mini"
                                @click="getAppletCode2"
                            >
                                刷新
                            </el-button>
                        </div>
                    </div>
                    <div class="login-wx-tip">
                        <div class="login-wx-tip-1">
                            <img src="~/assets/images/index/wx.png" alt="" />
                            <span>微信扫码</span>
                            登录/注册
                        </div>
                        <div class="login-wx-tip-2">
                            未注册的微信号将自动注册
                        </div>
                        <div class="login-wx-tip-3">
                            扫码即表示同意
                            <span @click="goxieyi(1)">《小竹用户协议》</span>
                            <span @click="goxieyi(2)">《用户隐私协议》</span>
                        </div>
                    </div>
                </template>
            </div>
        </div>

        <div class="login-footer">
            <div class="app-wx-code">
                <div class="code-item">
                    <!-- :style="{
                            filter: loginType == 'wx' ? 'blur(2px)' : '',
                        }" -->
                    <img src="~/assets/images/index/wx_code.jpg" alt="" />
                    小竹公众号
                </div>
                <div class="code-item">
                    <img src="~/assets/images/index/app_code.png" alt="" />
                    APP下载
                </div>
            </div>

            <div class="bottom-bottom">
                <a target="_blank" href="https://beian.miit.gov.cn/"
                    >皖ICP备2021017961号</a
                >
                <a
                    target="_blank"
                    class="img-a"
                    href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=34011102003330"
                >
                    <img src="~/assets/images/index/batb.png" alt="" />
                    皖公网安备 34011102003330号
                </a>
                Copyright © 2021-2022 小竹科技, All Rights Reserved.
            </div>
        </div>

        <el-dialog
            :visible.sync="dialogFormVisible"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            width="380px"
            @close="closeBD"
        >
            <div class="pc-all-dia-tit">
                <p>绑定手机号</p>
            </div>
            <el-form class="pc-all-dia-form" :model="loginForm">
                <el-form-item
                    class="pc-all-dia-form-item"
                    label=""
                    label-width="200"
                >
                    <el-input
                        v-model="loginForm.mobile"
                        autocomplete="off"
                        placeholder="手机号"
                    ></el-input>
                </el-form-item>
                <el-form-item label="" label-width="200">
                    <el-input
                        v-model="loginForm.code"
                        placeholder="验证码"
                        autocomplete="off"
                    >
                        <span
                            slot="append"
                            style="cursor: pointer"
                            @click="isGetCode"
                        >
                            {{ codeTest }}
                        </span>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                        class="pc-all-dia-form-submit"
                        type="primary"
                        @click="officialSubmit"
                    >
                        立即创建
                    </el-button>
                </el-form-item>
            </el-form>
            <div class="pc-all-dia-form-wx-tip">
                登录即代表您已同意
                <span @click="goxieyi(1)">《小竹用户协议》</span>
                <span @click="goxieyi(2)">《用户隐私协议》</span>
            </div>
        </el-dialog>

        <Vcode
            :show="vcodeShow"
            :imgs="imgs"
            @success="getCode"
            @close="close"
        />
    </div>
</template>

<script>
import mixinsIndex from "~/mixins/index";
import mixinsUser from "~/mixins/user";
import {
    pcRegister,
    userMobilelogin,
    userLogin,
    userChangepwd,
    getAppletCode,
    check_appletcache,
    make_ticket,
    smsSend,
    wxfollowloginCode,
    wxfollowloginApi,
    get_follow_openid,
    follow_login,
} from "@/assets/api/indexApi.js";

import { goTop } from "@/assets/utils/utils";

import myNav from "@/components/nav/myNav.vue";
import myMenu from "@/components/nav/myMenu_new";

import { mapMutations } from "vuex";

import md5 from "js-md5";

export default {
    async asyncData({ params }) {},
    mixins: [mixinsIndex, mixinsUser],
    fetch() {
        // The fetch method is used to fill the store before rendering the page
    },
    head() {
        return {
            title: "登录-【小竹财税平台】",
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content:
                        "【安徽小竹信息技术有限公司】是一家专业的财税科技型企业，旗下小竹财税官网汇集税收法规、会计法规、财税资讯、财税学院、财税工具、财税企服等版块，打造一站式财税服务平台！",
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content:
                        "小竹财税,小竹财税官网,小竹信息,小竹信息科技,小竹财税平台",
                },
            ],
        };
    },
    components: {
        myMenu,
        myNav
    },
    data() {
        return {
            loginType: "web",
            vcodeShow: false,

            tabsIndex: 0, // 0 快捷登录 1 密码登录 2 注册账户 3 找回密码
            codeTest: "获取验证码",
            // 登录数据
            loginForm: {
                mobile: null,
                code: "",
                password: "",
                agree: "0",
                passwordNew: "",
                passwordNew2: "",
            },
            loginRules: {
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                ],
                passwordNew: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                ],
                passwordNew2: [
                    {
                        required: true,
                        message: "请再次输入密码",
                        trigger: "blur",
                    },
                ],
                code: [
                    {
                        required: true,
                        message: "请输入短信验证码",
                        trigger: "blur",
                    },
                ],
                mobile: [
                    {
                        required: true,
                        message: "请输入手机号",
                        trigger: "change",
                    },
                ],
            },

            wxcode: "",
            ticket: "",
            wechatloading: false,
            wechatCheck: null,
            wechatCodeExpire: false,
            wechatCodeTime: 0,

            officialCode: "",
            scene_id: "",
            dialogFormVisible: false,
            openid: "",
            submitDisabled: false,

            imgs: [
                "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/code/ys1.png",
                "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/code/ys2.png",
                "https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/code/ys3.png",
            ],

            isMobile: false
        };
    },
    created() {},
    beforeMount() {
        // 只会在浏览器执行
        this.$options.components["Vcode"] = () => import("vue-puzzle-vcode");
    },
    mounted() {
        this.getAppletCode2();
        if (
            this.$route.query.url &&
            !this.$route.query.click &&
            !window.localStorage.getItem("token")
        )
            this.$message({
                message: "请登录后查看",
                type: "warning",
            });
        let codeTime = localStorage.getItem("codeTime");
        if (codeTime && parseInt(codeTime) > 0) {
            this.codeTimeout(parseInt(codeTime));
        }
        this.$nextTick(() => {
            goTop();
        });
    },
    // 销毁前重置body样式
    beforeDestroy() {
        this.openWebPage();
    },
    computed: {},
    watch: {},
    methods: {
        ...mapMutations("common", ["setuserInfo"]),
        // 获取小程序登录二维码
        async getAppletCode() {
            this.loginType = "wx";
            let time = Date.now();
            // console.log(time - this.wechatCodeTime);
            if (this.wechatCodeTime && time - this.wechatCodeTime < 60000) {
                if (!this.wechatCheck)
                    this.wechatCheck = setInterval(() => {
                        this.check_appletcache();
                    }, 2000);
                return;
            }
            this.wechatloading = true;
            this.wechatCodeExpire = false;
            const ticket = await make_ticket({});
            if (ticket.code == 1) {
                this.ticket = ticket.data;
                const res = await getAppletCode({
                    ticket: this.ticket,
                });
                this.wxcode = window.URL.createObjectURL(res);
                this.wechatCodeTime = time;
                this.wechatloading = false;

                if (this.wechatCheck) {
                    this.clearWeChatTime();
                }
                this.wechatCheck = setInterval(() => {
                    this.check_appletcache();
                }, 2000);
            } else {
                this.wechatloading = false;
            }
        },

        // 关闭绑定弹窗
        closeBD() {
            this.wechatCodeTime = 0;
            this.getAppletCode2();
        },

        // 公众号登录二维码
        async getAppletCode2() {
            this.loginType = "wx";
            let time = Date.now();
            if (this.wechatCodeTime && time - this.wechatCodeTime < 60000) {
                if (!this.wechatCheck)
                    this.wechatCheck = setInterval(() => {
                        this.check_appletcache2();
                    }, 2000);
                return;
            }

            this.wechatloading = true;
            const res = await wxfollowloginCode({});

            this.wechatCodeTime = time;
            this.officialCode = res.ticket_img;
            this.scene_id = res.scene_id;
            this.wechatloading = false;
            this.wechatCheck = setInterval(() => {
                this.check_appletcache2();
            }, 2000);
        },

        // 检测公众号二维码是否扫码关注
        async check_appletcache2() {
            if (
                !this.scene_id ||
                this.loginType == "web" ||
                this.$route.name != "Login"
            ) {
                this.clearWeChatTime();
                return;
            }
            wxfollowloginApi({
                scene_id: this.scene_id,
            });
            const res = await get_follow_openid({
                scene_id: this.scene_id,
            });
            if (res.sencedata.openid) {
                this.openid = res.sencedata.openid;
                this.clearWeChatTime();
                // 非已有openid 弹出绑定账号弹窗
                if (!res.userdata) {
                    this.dialogFormVisible = true;
                } else {
                    localStorage.setItem("token", res.userdata.token);
                    localStorage.setItem(
                        "userInfo",
                        JSON.stringify(res.userdata)
                    );
                    this.setuserInfo(res.userdata);

                    let path = this.$route.query.url
                        ? this.$route.query.url
                        : "/";
                    this.$router.replace({
                        path: path,
                    });
                    // setTimeout(() => {
                    //     location.reload();
                    // }, 1000);
                }
            }
        },

        mobileChange(value) {
            console.log(value)
            var reg = /^1[3456789]\d{9}$/;
            if (!reg.test(value)) {
                this.isMobile = false;
            } else {
                this.isMobile = true;
            }
            console.log(this.isMobile)
        },

        async officialSubmit() {
            if (!this.loginForm.mobile) {
                this.$alert("请输入手机号", "", {
                    confirmButtonText: "确定",
                });
                return;
            }
            if (!this.loginForm.code) {
                this.$alert("请输入验证码", "", {
                    confirmButtonText: "确定",
                });
                return;
            }
            const res = await follow_login({
                openid: this.openid,
                username: parseFloat(this.loginForm.mobile),
                captcha: parseFloat(this.loginForm.code),
            });
            if (res.code == 1) {
                localStorage.setItem("token", res.data.token);
                localStorage.setItem("userInfo", JSON.stringify(res.data));
                this.setuserInfo(res.data);

                let path = this.$route.query.url ? this.$route.query.url : "/";
                this.$router.replace({
                    path: path,
                });
                // setTimeout(() => {
                //     location.reload();
                // }, 1000);
            }
        },

        // 检测二维码票据状态
        async check_appletcache() {
            if (
                !this.ticket ||
                this.loginType == "web" ||
                this.$route.name != "Login"
            ) {
                this.clearWeChatTime();
                return;
            }
            const res = await check_appletcache({
                ticket: this.ticket,
            });
            // 二维码过期
            if (res.data && res.data == "10001") {
                this.clearWeChatTime();
                this.wechatCodeExpire = true;
                return;
            }
            if (res.token) {
                localStorage.setItem("token", res.token);
                localStorage.setItem("userInfo", JSON.stringify(res.userinfo));
                this.setuserInfo(res.userinfo);
                this.clearWeChatTime();
                let path = this.$route.query.url ? this.$route.query.url : "/";
                this.$router.replace({
                    path: path,
                });
                // location.reload();
            }
        },

        // 停止计时器
        clearWeChatTime() {
            console.log("停止");
            clearInterval(this.wechatCheck);
            this.wechatCheck = null;
        },

        // 点击提交登录表单
        clickSubmit() {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.submitForm();
                } else {
                    // console.log('error submit!!');
                    return false;
                }
            });
        },

        // 提交登录
        async submitForm() {
            this.submitDisabled = true;

            // 注册
            if (this.tabsIndex == 2) {
                var res = await pcRegister({
                    mobile: this.loginForm.mobile,
                    captcha: this.loginForm.code,
                    password: this.loginForm.password,
                });
                this.submitDisabled = false;
                if (res.code == 1) {
                    this.tabsIndex = 1;
                    this.$message({
                        showClose: true,
                        message: res.msg,
                        type: "success",
                    });
                    return;
                }
            }

            // 登录
            else if (this.tabsIndex == 0 || this.tabsIndex == 1) {
                if (this.tabsIndex == 0)
                    var res = await userMobilelogin({
                        mobile: parseFloat(this.loginForm.mobile),
                        captcha: parseFloat(this.loginForm.code),
                        login_type: 2,
                    });
                if (this.tabsIndex == 1)
                    var res = await userLogin({
                        account: parseFloat(this.loginForm.mobile),
                        password: this.loginForm.password,
                        login_type: 2,
                    });
                this.submitDisabled = false;
                if (res.code == 1) {
                    this.$message({
                        showClose: true,
                        message: res.msg,
                        type: "success",
                    });

                    localStorage.setItem("token", res.data.token);

                    this.openWebPage();

                    let path = this.$route.query.url
                        ? this.$route.query.url
                        : "/";
                    this.$router.replace({
                        path: path,
                    });
                } else {
                    // this.$message({
                    //     showClose: true,
                    //     message: res.msg,
                    //     type: "warning",
                    // });
                    return;
                }
            }

            // 忘密码
            else if (this.tabsIndex == 3) {
                var res = await userChangepwd({
                    mobile: parseFloat(this.loginForm.mobile),
                    captcha: parseFloat(this.loginForm.code),
                    newpassword: this.loginForm.passwordNew,
                    newpassword2: this.loginForm.passwordNew,
                });
                this.submitDisabled = false;
                if (res.code == 1) {
                    this.tabsIndex = 1;
                    this.$message({
                        showClose: true,
                        message: res.msg,
                        type: "success",
                    });
                    return;
                }
            }
            this.submitDisabled = false;
        },

        // 获取验证码
        async getCode() {
            this.vcodeShow = false; // 通过验证后，需要手动隐藏模态框
            if (!this.loginForm.mobile) {
                this.$alert("请输入手机号", "", {
                    confirmButtonText: "确定",
                });
                return;
            }
            var reg = /^1[3456789]\d{9}$/;
            if (!reg.test(this.loginForm.mobile)) {
                this.$alert("手机号码有误", "", {
                    confirmButtonText: "确定",
                });
                return;
            }

            let parems = {
                mobile: this.loginForm.mobile,
                ticket: md5(md5(this.loginForm.mobile) + "xzcs"),
            };

            if (this.tabsIndex == 0) parems.event = "mobilelogin";
            else if (this.tabsIndex == 2) parems.event = "register";
            else if (this.tabsIndex == 3) parems.event = "changepwd";

            // 临时添加
            if (this.loginType == "wx") parems.event = "mobilelogin";

            if (this.codeTest == "获取验证码") {
                this.codeTest = "发送中";
                const res = await smsSend(parems);

                if (res.code == 1) {
                    this.$message({
                        showClose: true,
                        message: res.msg,
                        type: "success",
                    });
                    this.codeTimeout(60);
                } else {
                    this.codeTest = "获取验证码";
                    this.$alert(res.msg, "", {
                        confirmButtonText: "确定",
                    });
                }
            }
        },

        codeTimeout(e) {
            localStorage.setItem("codeTime", e);
            if (e > 0) {
                this.codeTest = e + "s";
                setTimeout(() => {
                    this.codeTimeout(e - 1);
                }, 1000);
            } else {
                this.codeTest = "获取验证码";
            }
        },

        // 用户点击遮罩层，应该关闭模态框
        close() {
            this.vcodeShow = false;
        },
        isGetCode() {
            this.vcodeShow = true;
        },

        // 用户协议跳转
        goxieyi(e) {
            if (e == 1) {
                let { href } = this.$router.resolve({
                    path: "/UserAgreement/",
                    query: {
                        index: 0,
                    },
                });
                window.open(href, "_blank");
                // window.open(
                //     "https://api.xiaozhucaishui.com/xieyi/user",
                //     "_blank"
                // );
            } else {
                let { href } = this.$router.resolve({
                    path: "/UserAgreement/",
                    query: {
                        index: 1,
                    },
                });
                window.open(href, "_blank");
                // window.open(
                //     "https://api.xiaozhucaishui.com/xieyi/privacy",
                //     "_blank"
                // );
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.code-test-good{
    color: #1c87f3 !important;
}
.login {
}
.main {
    position: relative;
    width: 100%;
    height: 625px;
    .bj-img {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 625px;
        object-fit: cover;
    }
}

.login-input {
    ::v-deep .el-input__inner {
        height: 47px;
        line-height: 47px;
    }
}

.login-div {
    width: 380px;
    max-width: 380px;
    // height: 450px;
    background: #ffffff;
    border-radius: 10px;
    position: relative;
    z-index: 1;
    padding: 40px;
    margin: 0 auto;
    left: 410px;
    top: 80px;
    box-sizing: border-box;
}

.login-wx-title {
    text-align: center;
    font-size: 20px;
    margin: 0 0 10px;
    height: 28px;
    line-height: 28px;
    color: #363636;
    position: relative;
    top: -10px;
}

.login-wx-img {
    padding-top: 18px;
    min-height: 242px;
    text-align: center;
    position: relative;
    img {
        width: 220px;
        height: 220px;
    }
    .expire {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        background-color: rgba($color: #ffffff, $alpha: 0.9);
        color: #666666;
        text-align: center;
        padding-top: 104px;
        top: 0;
        left: 0;
    }
}

.login-wx-tip {
    margin-top: 5px;
    text-align: center;
    .login-wx-tip-1 {
        padding-top: 8px;
        font-size: 15px;
        color: #333333;
        img {
            width: 14px;
            height: 14px;
        }
        span {
            font-weight: 700;
            color: #333333;
            padding: 0 6px;
        }
    }
    .login-wx-tip-2 {
        padding-top: 4px;
        font-size: 12px;
        color: #999999;
    }
    .login-wx-tip-3 {
        font-size: 12px;
        padding-top: 24px;
        color: #999999;
        span {
            color: #335b84;
            cursor: pointer;
        }
    }
}

.login-title {
    text-align: left;
    font-size: 16px;
    color: #333333;
}

.top-tabs {
    display: flex;
    justify-content: center;

    .tab {
        cursor: pointer;
        font-size: 16px;
        color: #333333;
        margin: 0 20px;

        &::after {
            content: "";
            width: 27px;
            height: 2px;
            background: #ffffff;
            display: block;
            margin: 0 auto;
            margin-top: 8px;
        }
    }

    .tab-s {
        color: #1c87f3;

        &::after {
            background: #1c87f3;
        }
    }
}

.form {
    padding-top: 32px;
}

.qita {
    text-align: right;
    font-size: 12px;
    color: #777777;
    cursor: pointer;

    span {
        color: #333333;
    }
}

.login-footer {
    background: #ffffff;
    width: 100%;
    padding: 47px 0 63px 0;
    .app-wx-code {
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        .code-item {
            text-align: center;
            margin: 0 22px;
            font-size: 16px;
            color: #666666;
            img {
                width: 100px;
                height: 100px;
                display: block;
                margin-bottom: 19px;
            }
        }
    }
}

.bottom-bottom {
    margin-top: 37px;
    font-size: 14px;
    color: #666666;
    text-align: center;
    a {
        color: #666666;
        text-decoration: none;
        margin: 0 4px;
        &:hover {
            color: #409eff;
            border-bottom: 1px solid #409eff;
        }
    }

    .img-a {
        img {
            width: 20px;
            height: 20px;
            position: relative;
            top: 4px;
            padding: 0;
            margin: 0;
        }
    }
}

.pc-all-dia-tit {
    line-height: 24px;
    padding-top: 30px;
    padding-bottom: 30px;
    width: 100%;
    background: rgba(245, 247, 250, 1);
    border-radius: 4px;
    font-size: 24px;
    font-weight: 500;
    color: rgba(22, 32, 66, 1);
    text-align: center;
}

.pc-all-dia-form-wx-tip {
    font-size: 14px;
    color: rgba(140, 142, 158, 1);
    line-height: 16px;
    width: 280px;
    text-align: center;
    margin: 0 auto;
    padding-top: 46px;
    padding-bottom: 20px;
    span {
        color: #1c87f3;
        cursor: pointer;
    }
}

.pc-all-dia-form {
    width: 280px;
    margin: 25px auto 0;

    .pc-all-dia-form-submit {
        width: 280px;
        height: 46px;
        background: linear-gradient(
            180deg,
            rgba(72, 134, 255, 1) 0%,
            rgba(72, 106, 255, 1) 100%
        );
        box-shadow: 1px 8px 10px 0px rgba(72, 108, 255, 0.3);
        border-radius: 2px;
        font-size: 16px;
        color: rgba(234, 239, 255, 1);
        line-height: 46px;
        cursor: pointer;
        padding: 0;
    }
    ::v-deep .el-input__inner {
        background: rgba(246, 247, 251, 1);
        border-radius: 2px;
        padding-left: 10px;
        box-sizing: border-box;
        line-height: 34px;
        border: none;
    }

    ::v-deep .el-input-group__append {
        background: rgba(246, 247, 251, 1);
        border-radius: 2px;
        padding-left: 10px;
        box-sizing: border-box;
        line-height: 34px;
        border: none;
        &::before {
            content: "";
            display: inline-block;
            position: relative;
            top: 2px;
            left: -19px;
            height: 15px;
            width: 1px;
            background-color: rgba(194, 196, 206, 1);
        }
    }
}

::v-deep .el-dialog__header {
    padding: 0;
}
::v-deep .el-dialog__body {
    padding: 0;
}
::v-deep .el-dialog__footer {
    padding: 0;
}
::v-deep .wx-dialog .wx-qrcode {
    width: 167px;
    height: 167px;
}
</style>